import React, { PureComponent } from 'react';
import { connect } from 'dva';
import style from "styled-components";
import { Input, Button, message, DatePicker, Modal, Form, TreeSelect } from 'antd';
import Drawer from 'react-motion-drawer';
import PTable from "../../../components/Pro/PTable";
import EditGoodDeeds from "./EditGoodDeeds";
import {
  deletePerGoodDeedsById,
  addPerGoodDeeds,
  getTreeperBydepart,
} from "../../../services/api";

const FormItem = Form.Item;
const dateFormat = 'YYYY/MM/DD';
const { confirm } = Modal;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const config = {
  rules: [
    {
      type: 'object',
      required: false,
      message: '请选择日期!'
    }
  ]
};

@connect(state => ({ profile: state.profile }))
@Form.create()

export default class GoodDeeds extends PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {
      visible: false,
      forceUpdate: false,
      goodDeedsId: 0,
      open: false,//添加窗口
      openEdit: false,//修改
      showPerId: 0,
      perId: '',
      treeData: [
        //树
        { title: "", key: "" }
      ],
      pageParm: {
        keyWords: "",
        startDate: "",
        endDate: "",
        pageSize: "10",
        pageNumber: "1"
      },
      keyWords: "",
      startDate: '',
      endDate: '',
    };
  }
  componentDidMount() {
    getTreeperBydepart({}).then(
      response => {
        console.log(response, "getTreeperBydepart-response");
        this.setState({ treeData: response.data });
      },
      err => {
        console.log(err, "getTreeperBydepart-err");
      }
    );
  }
  //修改
  editDrawer = (goodDeedsId) => {
    this.setState({ goodDeedsId });
    this.setState({ openEdit: true });
  };

  //增加
  addDrawer = () => {
    this.setState({ open: true });
  };

  //输入框的书写
  inputSerchGoodDeedsChange = (e) => {
    console.log(e.target.value.trim());
    this.setState({ keyWords: e.target.value.trim() });
  };

  //报表类型 change
  pSelectChange = (value, type) => {
    this.setState({ [type]: value });
  };

  //刷新方法
  tableUpdate = () => {
    this.setState({ forceUpdate: true }, () => {
      this.setState({ forceUpdate: false });
    });
  };

  //点击搜索
  search = () => {
    const pageParm = { ...this.state.pageParm };
    const { keyWords, startDate, endDate } = this.state;
    pageParm.keyWords = keyWords;
    pageParm.startDate = startDate;
    pageParm.endDate = endDate;
    this.setState({ pageParm });
  };

  //时间选择
  onChangeTime = (date, dateString) => {
    this.setState({
      startDate: dateString[0],
      endDate: dateString[1],
    });
  };
  //表格渲染
  renderTable = () => {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        width: 120,
        render: (text, record) => (
          <div>
            <p style={{ width: 120, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', marginTop: '8px', marginBottom: '8px' }}>{record.name}</p>
          </div>
        )
      },
      {
        title: '身份证号',
        dataIndex: 'idCardNo',
        key: 'idCardNo',
        width: 200,
        render: (text, record) => (
          <div>
            <p style={{ width: 200, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', marginTop: '8px', marginBottom: '8px' }}>{record.idCardNo}</p>
          </div>
        )
      },
      {
        title: '日期',
        dataIndex: 'happenDate',
        key: 'happenDate',
        width: 140,
        render: (text, record) => (
          <div>
            <p style={{ width: 140, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', marginTop: '8px', marginBottom: '8px' }}>{record.happenDate}</p>
          </div>
        )
      },
      {
        title: '内容',
        dataIndex: 'goodContent',
        key: 'goodContent',
        width: 320,
        render: (text, record) => (
          <div>
            <p style={{ width: 320, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', marginTop: '8px', marginBottom: '8px' }}>{record.goodContent}</p>
          </div>
        ),
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 90,
        render: (text, record) => (
          <div>
            <Opton onClick={this.editDrawer.bind(this, record.goodDeedsId)} style={{ color: '#0F71FF', fontSize: '14px' }}>修改</Opton>
            <Opton className="delete" onClick={this.showDeleteConfirm.bind(this, record.goodDeedsId)} style={{ color: '#0F71FF', fontSize: '14px' }} s>删除</Opton>
            <p style={{ width: 90, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', marginTop: '8px', marginBottom: '8px' }}>{record.action}</p>
          </div>
        ),
      }
    ];
    return (
      <PTable
        style={{ marginTop: 20 }}
        columns={columns}
        url="listPerGoodDeeds"
        pageParm={this.state.pageParm}
        forceUpdate={this.state.forceUpdate}
      />
    );
  };

  hideModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleModalOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
      open: false,
    });
  };

  handleModalCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  showDeleteConfirm = (goodDeedsId) => {
    console.log(goodDeedsId);
    const that = this;
    confirm({
      title: '是否删除所选信息，删除后无法找回。是否确认删除？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        console.log("ok");
        that.orderDelete(goodDeedsId);
      },
      onCancel() {
        console.log('Cancel');
      },
    });

  };

  //删除
  orderDelete = (goodDeedsId) => {
    deletePerGoodDeedsById({ goodDeedsId }).then(() => {
      this.tableUpdate();
    }, (err) => {
      console.log(err);
    });
  };
  //树形选择器改编
  handleTreeSelectChange = (value, label, extra) => {
    this.setState({ showPerId: 0 });
    const lastValue = this.state.perId;
    if (extra.triggerNode && extra.triggerNode.props && extra.triggerNode.props.treeType === "1") {
      console.log("部门");
      this.setState({ perId: lastValue });
    } else {
      this.setState({ perId: value });
    }
  };
  //表单提交
  handleAddGoodDeedsSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      console.log("表单提交......", values);
      values.perId = this.state.perId;
      console.log(values.remark, "备注.。");
      console.log(values.perId, "人员");
      values.perId.length === 0 && this.setState({ showPerId: 1 });

      if (!err && values.perId) {
        const rangeValue = values['happenDate'];
        values.happenDate = rangeValue.format('YYYY-MM-DD');
        addPerGoodDeeds(values).then((data) => {
          console.log(data);
          this.setState({ forceUpdate: true });
          this.setState({ open: false });
          this.setState({ perId: '' });
          this.tableUpdate();
          const { setFieldsValue } = this.props.form;
          setFieldsValue({
            idCardNo: '',
            happenDate: '',
            goodContent: '',
            remark: '',
          });
        }, (err1) => {
          console.log(err1);
        });
      }
    });
  };

  render() {
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 7
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 17
        },
        md: {
          span: 17
        }
      }
    };
    const { getFieldDecorator } = this.props.form;
    return (

      <Content>

        {/* 搜索条件面板 */}
        <div className="searchpanel">
          <Form className="Wrapper-form" layout="inline" onSubmit={this.handleSubmit}>
            <FormItem {...formItemLayout} label="关键字：" colon={false} style={{ marginTop: 0 }}>
              <Input style={{ width: 214 }} onChange={this.inputSerchGoodDeedsChange} placeholder="请输入姓名、身份证号" />
            </FormItem>
            <FormItem {...formItemLayout} label="发生日期:" colon={false} className="post">
              <RangePicker style={{ width: 214 }} showTime={{ format: 'HH:mm' }} format={dateFormat} onChange={this.onChangeTime} />
            </FormItem>
            <FormItem {...formItemLayout} label="" colon={false}>
              <Button type="primary" style={{ marginLeft: 17 }} onClick={this.search} >搜索</Button>
            </FormItem>
            <br />
            <FormItem {...formItemLayout} label="" colon={false}>
              <div className="btns">
                <Button type="primary" onClick={this.addDrawer}>新增好人好事</Button>
              </div>
            </FormItem>
          </Form>
        </div>
        {this.renderTable()}
        <Modal
          title="删除的好人好事不可恢复"
          visible={this.state.visible}
          onOk={this.handleModalOk}
          onCancel={this.handleModalCancel}
        >
          <p>确认删除“好人好事”？</p>
        </Modal>


        {/*好人好事详情*/}
        <Drawer
          overlayColor="rgba(0, 0, 0,0)"
          right
          open={this.state.open}
          noTouchClose
          width={600}
          zIndex={2}
          className="drawer-box"
          onChange={(open) => {
            this.setState({ open });
          }}
        >
          <div className="drawer">
            <div className="drawer-header">好人好事详情</div>
            <div className="drawer-content">
              <Form style={{ marginTop: 24 }} onSubmit={this.handleAddGoodDeedsSubmit}>
              {this.state.showPerId === 1 ?
                <Formitem style={{ marginLeft: 50,marginBottom:0, 'display': 'inline-block' }}>
                    <Formlable >
                      <span style={{ color: '#f5222d' }}>* </span>&nbsp;被表彰奖励人员:</Formlable>
                    <TreeSelect
                      value={this.state.perId}
                      style={{
                        width: 294,
                        border: '1px solid #f5222d',
                        borderRadius: 4
                      }}
                      dropdownStyle={{
                        maxHeight: 400,
                        overflow: "auto"
                      }}
                      treeData={this.state.treeData}
                      onChange={this.handleTreeSelectChange}
                      treeDefaultExpandAll
                    /> 
                      <div style={{ 'color': '#f5222d', marginLeft: 114 }}> 请选择奖励人员</div>
                    </Formitem>
                    :
                    <Formitem style={{ marginLeft: 50,marginBottom:24, 'display': 'inline-block' }}>
                    <Formlable >
                      <span style={{ color: '#f5222d' }}>* </span>被表彰奖励人员:</Formlable>
                    <TreeSelect
                      value={this.state.perId}
                      style={{
                        width: 294,
                      }}
                      dropdownStyle={{
                        maxHeight: 400,
                        overflow: "auto"
                      }}
                      treeData={this.state.treeData}
                      onChange={this.handleTreeSelectChange}
                      treeDefaultExpandAll
                    /> 
                    <div/>
                 </Formitem> }
                <FormItem {...formItemLayout} label="身份证号: ">
                  {getFieldDecorator('idCardNo', {
                    // rules: [
                    //   {
                    //     required: true
                    //   }
                    // ]
                  })(<Input style={{ width: 294 }} />)}
                </FormItem>
                <FormItem {...formItemLayout} label="发生日期">
                  {getFieldDecorator('happenDate', {
                    rules: [
                      {
                        required: true, message: '请选择发生日期'
                      }
                    ]
                  }, config)(<DatePicker style={{ width: 294 }} />)}
                </FormItem>
                <FormItem {...formItemLayout} label="好人好事内容">
                  {getFieldDecorator('goodContent', {
                    rules: [
                      {
                        required: true, message: '请填写好人好事内容'
                      }
                    ]
                  })(<TextArea style={{ width: 294 }} maxLength="500" rows={4} placeholder="请输入" />)}
                </FormItem>
                <FormItem {...formItemLayout} label="备注">
                  {getFieldDecorator('remark', {
                    initialValue: "",
                    rules: [
                      {
                        required: false
                      }
                    ]
                  })(<TextArea style={{ width: 294 }} maxLength="500" rows={4} placeholder="请输入" />)}
                </FormItem>
              </Form>
            </div>
            <div className="drawer-footer">
              <Button onClick={this.hideModal}>返回</Button>
              <Button type="primary" onClick={this.handleAddGoodDeedsSubmit}>提交</Button>
            </div>
          </div>
        </Drawer>
        <Modal
          title="提示"
          visible={this.state.visible}
          onOk={this.handleModalOk}
          onCancel={this.handleModalCancel}
        >
          <p>当前信息未保存，是否确认返回？</p>
        </Modal>
        <EditGoodDeeds onChange={(openEdit) => { this.setState({ openEdit })}} visible={this.state.openEdit} goodDeedsId={this.state.goodDeedsId} tableUpdate={this.tableUpdate} />
      </Content>
    );
  }
}
/************************样式************************/

const Content = style.div`{
  font-size: 14px;
  color: rgba(0,0,0,0.65);
  .searchpanel{
     margin-bottom:16px;
    .post{
      margin:0 8px 0 16px;
    }
  }
  .btns{
    margin-top:16px;
  }
}`;

const Opton = style.span`{
  font-size: 12px;
  color: #0F71FF;
  cursor:pointer;
  margin-right:8px;
}`;
const Formitem = style.label`{
font-size: 14px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.65);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: top;
}`;
const Formlable = style.span`{
  text-align: right;
  vertical-align: middle;
  line-height: 39.9999px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  margin-right:8px;
}`;

